<template>
	<view class="content">
		<view class="input-box">
			<view class="head-tit">输入验证码</view>
			<view class="code-input">
				<u-code-input @finish="codeFinish" mode="line" color="#f18b49" hairline focus></u-code-input>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				code: '',
				mobile: '',
			}
		},
		onLoad(e) {
			this.mobile = e.mobile
			if(e.code == 200){
				uni.showToast({
					title: '验证码已发送到手机短信，请注意查收',
					duration: 3000,
					icon: 'none'
				})
			}
		},
		methods: {
			codeFinish(data) {
				this.$http('/gjcApi/userLogin?mobile=' + this.mobile + '&note=' + data, {}, res => {
					if(res.code == 419) {
						uni.showToast({
							title: '验证码错误',
							duration: 1000,
							icon: 'none'
						})
					}else if(res.code == 414) {
						uni.showToast({
							title: '该账号已在别的地方登录,请确认!',
							duration: 1000,
							icon: 'none'
						})
					} else if(res.state == true){
						uni.setStorageSync('token', res.token)
						uni.setStorageSync('username', res.name)
						uni.setStorageSync('userid', res.id)
						uni.showToast({
							title: '验证中',
							icon: 'loading',
						})
						setTimeout(() => {
							uni.hideToast()
							uni.showToast({
								title: '登录成功',
								icon: 'none',
							})
							setTimeout(() =>{
								uni.navigateBack({
									delta: 3
								})
							},1000)
						},1000)
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background: $uni-model-color;
	}
	.content{
		padding: 60rpx;
		.input-box{
			.head-tit{
				font-size: 44rpx;
				margin-bottom: 30rpx;
				letter-spacing: 4rpx;
				color: $uni-text-color;
			}
			.code-input{
				padding: 30rpx 0 10rpx 0;
				.u-code-input{
					justify-content: space-around;
				}
			}
			.login-btn{
				margin-top: 40rpx;
				padding: 20rpx 0;
				text-align: center;
				background: #ff914d;
				border-radius: 10rpx;
				letter-spacing: 20rpx;
				color: $uni-model-color;
			}
		}
	}
</style>